<!--营业概况-->
<template>
<el-container>
  <el-header>
    <el-button class="export-btn  float-left"  type="primary" round>导出</el-button>
    <!-- 导出按钮 -->
     <el-button class="float-right search-btn" type="primary" round>查询</el-button>    
    <el-date-picker
      class="dataTime float-right"
      v-model="dataTime"
      type="datetimerange"
      :picker-options="pickerOptions2"
      range-separator="|"
      start-placeholder="2018-3-13 0:00:00"
      end-placeholder="2018-3-13 24:00:00"
      align="right">
    </el-date-picker>
    <!-- 时间选择 -->
  </el-header>
  <el-main>Main</el-main>
</el-container>


</template>
<style lang="less" scoped>

  .export-btn{
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin-left: 20px;
    margin-right: 20px;
  }
  .search-btn{
    height: 30px;
    line-height: 30px;
    padding: 0 20px;
    margin-top: 15px;
    border-radius: 0 14px 14px 0;
    margin-right: 20px;
    margin-left: 0;
  }
  .dataTime{
    border: 1px solid #409eff;
    color: #409eff;
    border-radius: 14px 0  0 14px;
    height: 30px;
    padding: 0;
    margin: 0;
    margin-top: 15px;
    overflow: hidden;
  }


</style>
<style scoped>

  .el-header, .el-footer {
    background-color: #FFF;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }




  .el-date-editor .el-range-input{
    float: left;
    color: #409eff;
    width: calc(50% - 15px);
  }
  .el-date-editor .el-range-separator{
    float: left;
    color: #409eff;
  }
  .el-date-editor .el-range__icon{
    display: none;
  }
</style>


<script>
export default {
  props:['lang'],
  data() {
      return {
        activeName2: 'first',
        //初始的选择标签页
        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        dataTime: ''
        //时间选择器
      };
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      }
    }
}
</script>
